<script setup>
import { onMounted, ref } from 'vue'
import { requireImg, calculatePercentage } from '@/utils/common'
import { deviceDataServer } from '@/api'
// 监视探测目标数
const counts = ref(0)

// 获取通导监数据
const getDeviceData = async () => {
  const {
    data: { count, deviceDataList }
  } = await deviceDataServer()
  counts.value = count
  lenged.value = deviceDataList.map((item) => {
    return {
      name: item.equipmentName,
      value: item.equipmentCount
    }
  })
}

onMounted(() => {
  getDeviceData()
})
const lenged = ref([
  {
    name: '设备一',
    value: 12
  },
  {
    name: '设备二',
    value: 30
  },
  {
    name: '设备三',
    value: 8
  },
  {
    name: '设备四',
    value: 8
  }
])
const optionData = {
  color: ['#2F9CFF', '#3CE4E8', '#FFF5A0', '#FFA478', '#FF7878'],
  tooltip: {
    trigger: 'item',
    borderColor: '#0F2638',
    backgroundColor: '#0F2638DB',
    textStyle: {
      color: '#fff',
      fontSize: 14
    },
    formatter: function (params) {
      return `<div>${params.name} ${params.value} 个</div>`
    }
  },
  graphic: {
    elements: [
      {
        type: 'image',
        z: 3,
        style: {
          image: requireImg('infrastructure/echart_icon_qj.png'),
          width: 88,
          height: 88
        },
        left: 'center',
        top: 'center'
      }
    ]
  },
  series: [
    {
      name: '',
      type: 'pie',
      clockWise: false,
      radius: [48, 60],
      center: ['50%', '50%'],
      hoverAnimation: true,
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      },
      data: lenged
    }
  ]
}
const option = ref(optionData)
</script>
<template>
  <div class="card">
    <CommonTitle title="通信基站数据" />
    <div class="conbox">
      <div class="flytime">
        <p>
          <span>监视探测目标数</span>
          <span>/个</span>
        </p>
        <p>
          <NumberAnimate :count="counts"></NumberAnimate>
        </p>
      </div>
      <div class="echartbox">
        <div class="left">
          <Charts :option="option" container="3" />
        </div>
        <div class="right">
          <div :class="['item', 'item' + (index + 1)]" v-for="(item, index) in lenged" :key="index" v-show="index < 2">
            <p>{{ item.name }}<span>/个</span></p>
            <p>
              <NumberAnimate :count="item.value"></NumberAnimate>
              <span>{{
                calculatePercentage(
                  lenged.map((i) => i.value),
                  index
                )
              }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="lengedbox">
        <div :class="['item', 'item' + (index + 1)]" v-for="(item, index) in lenged" :key="index" v-show="index > 1">
          <p>{{ item.name }}<span>/个</span></p>
          <p>
            <NumberAnimate :count="item.value"></NumberAnimate>
            <span>{{
              calculatePercentage(
                lenged.map((i) => i.value),
                index
              )
            }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  margin-top: 15px;

  .conbox {
    padding: 10px;

    .flytime {
      width: 100%;
      height: 43px;
      background: url('@img/overview/fly_servertime_bg.png');
      background-size: 100% 100%;
      display: flex;
      align-items: center;

      p:first-child {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 5px 0 5px 30px;

        span:last-child {
          color: #2f9cff;
        }
      }

      p:last-child {
        flex: 1;
        text-align: center;
      }

      &:deep(.odometer-numbers) {
        span {
          font-family: DINAlternate;
          font-size: 28px;
          line-height: 28px;
          color: #ffffff;
          letter-spacing: 5px;
          background: linear-gradient(to bottom, #ffffff 0%, #00d5ff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .echartbox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 160px;
      margin: 10px 0px 0px;

      .left {
        width: 160px;
        height: 160px;
        margin: 0 10px;
        background: center center url('@img/infrastructure/echart_bg.png') no-repeat;
        background-size: 100% 100%;
      }

      .right {
        width: 110px;
        height: 160px;
        margin-right: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }

    .lengedbox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      margin-top: 20px;
    }

    .item {
      width: 110px;
      height: 72px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 20px;

      p:first-child {
        color: #85b9cb;

        span {
          color: #2897ff;
          margin-left: 15px;
        }
      }

      p:last-child {
        display: flex;
        font-family: DINAlternate;
        font-size: 23px;
        margin-top: 10px;
        align-items: flex-end;

        span {
          margin-left: 15px;
          color: #85b9cb;
          font-size: 14px;
          font-family: PingFang;
        }
      }

      &.item1 {
        background: left url('@img/infrastructure/lenged01.png') no-repeat;
        background-size: 15px 72px;
      }

      &.item2 {
        background: left url('@img/infrastructure/lenged02.png') no-repeat;
        background-size: 15px 72px;
      }

      &.item3 {
        background: left url('@img/infrastructure/lenged03.png') no-repeat;
        background-size: 15px 72px;
      }

      &.item4 {
        background: left url('@img/infrastructure/lenged04.png') no-repeat;
        background-size: 15px 72px;
      }

      &.item5 {
        background: left url('@img/infrastructure/lenged05.png') no-repeat;
        background-size: 15px 72px;
      }
    }
  }
}
</style>
